<template>
  <el-table
    :data="exercisesData"
    stripe
    border
    ref="table"
  >
    <el-table-column
      prop="number"
      label="#"
      width="40"
      align="center"
      header-align="center"
    ></el-table-column>
    <el-table-column
      label="标题"
      min-width="180"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <!-- <div>{{scope.row.year}}</div> -->
        <div>
          <el-tag
            size="mini"
            style="margin:2px;"
          >{{scope.row.year}}年度</el-tag>
          <el-tag
            size="mini"
            style="margin:2px;"
          >第{{scope.row.cycle}}期</el-tag>
          <el-tag
            size="mini"
            style="margin:2px;"
          >{{scope.row.office}}</el-tag>
          <el-tag
            size="mini"
            style="margin:2px;"
          >{{scope.row.hours}}学时</el-tag>
        </div>
        <div style="margin:6px 0;">{{scope.row.title}}</div>
      </template>
    </el-table-column>
    <!-- <el-table-column
        prop="title"
        label="标题"
        min-width="150"
        header-align="center"
      ></el-table-column> -->
    <el-table-column
      label="科目"
      min-width="240"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <el-tag
          v-for="item in scope.row.subjects"
          :key="item"
          size="mini"
          style="margin:2px;"
        >{{ item }}</el-tag>
          <!-- <span>{{scope.row.subjects.join('、')}}</span> -->
      </template>
    </el-table-column>
    <!-- <el-table-column
        prop="hours"
        label="学时"
        min-width="50"
        align="center"
        header-align="center"
      ></el-table-column> -->
    <el-table-column
      label="有效期"
      width="120"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <div style="text-align:center">
          <div><i class="el-icon-bottom-right" />{{scope.row.startDate}}</div>
          <div><i class="el-icon-top-right" />{{scope.row.endDate}}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="创建"
      width="120"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <div style="text-align:center">
          <div><i class="el-icon-user" />{{scope.row.author}}</div>
          <div>
            <el-tag
              size="mini"
              type="info"
            >
              <i class="el-icon-date"></i>
              <span>{{dateFormat("yyyy-MM-dd",new Date(scope.row.updateTime))}}</span>
            </el-tag>
          </div>
          <div>
            <el-tag
              size="mini"
              type="info"
            >
              <i class="el-icon-time"></i>
              <span>{{dateFormat("hh:mm:ss",new Date(scope.row.updateTime))}}</span>
            </el-tag>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="description"
      label="说明"
      min-width="150"
      header-align="center"
    ></el-table-column>
    <el-table-column
      label="操作"
      width="90"
      align="center"
      header-align="center"
    >
      <template slot-scope="scope">
        <div>
          <el-button
            type="text"
            size="small"
            :style="{color:chackExpired(scope.row.startDate,scope.row.endDate)==='active'?'#67C23A':'#F56C6C',padding:'0',margin:'3px 0'}"
            @click="changeValid(scope.row)"
          >
            {{chackExpired(scope.row.startDate,scope.row.endDate)==='expired'?'已过期':
              chackExpired(scope.row.startDate,scope.row.endDate)==='pending'?'未开始':'生效中'}}</el-button>
        </div>
        <div>
          <el-button
            type="text"
            size="small"
            style="padding:0;margin:3px 0"
            @click="$emit('modify',scope.row)"
          ><i class="el-icon-edit" />编辑</el-button>
        </div>
        <div>
          <el-button
            type="text"
            size="small"
            style="padding:0;margin:3px 0"
            @click="$alert(JSON.stringify(scope.row,null,2),'该功能暂不开放~')"
          ><i class="el-icon-delete" />删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { format } from "@/utils/datetime.js";
  export default {
    name: "exerciseList",
    computed: {
      exercisesData() {
        if (this.$store.state.exercisesQueried.length === 0) {
          return new Array();
        }
        return this.$store.state.exercisesQueried
      },
    },
    methods: {
      dateFormat: format,
      chackExpired(startDate, endDate) {
        let s = new Date(startDate).getTime();
        let e = new Date(endDate).getTime();
        let n = new Date().getTime();
        if (n > e) {
          return 'expired';
        } else if (n < s) {
          return 'pending';
        } else {
          return 'active';
        }
      },
      // refreshTable() {
      //   this.tableVisible = false;
      //   this.$nextTick(() => {
      //     this.tableVisible = true;
      //   })
      // },
    },
  }
</script>